<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/include.js"></script>
    <script src="http://base-admin.oss-cn-beijing.aliyuncs.com/js/publicEnums.js?v=1.2"></script>
</head>
<body>
    <div id="app">
        <div >
            <table>
                <tr>
                    <td>
                        <el-input v-model="searchForm.name" placeholder="名称模糊搜索" clearable style="width: 200px;"></el-input>
                    </td>
                    <td>
                        <el-select v-model="searchForm.status" placeholder="状态">
                            <el-option
                                    v-for="item in statuses"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                    <td>
                        <button @click="search" type="button" class="el-button filter-item el-button--success el-button--small">
                            <i class="el-icon-search"></i><span>搜索</span>
                        </button>
                    </td>
                    <td>
                        <button @click="toAdd" type="button" class="el-button el-button--primary el-button--small">
                            <i class="el-icon-plus"></i><span>新增</span>
                        </button>
                    </td>
                    <td>
                        <button @click="showLog" type="button" class="el-button filter-item el-button--info el-button--mini"><!---->
                            <i class="el-icon-tickets"></i><span>日志</span>
                        </button>
                    </td>

                </tr>
            </table>
        </div>

        <div style="margin-top: 5px;">
            <el-table
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    v-loading="loading">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="任务名称">
                </el-table-column>
                <el-table-column
                        prop="cronExpression"
                        label="cron表达式">
                </el-table-column>

                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status" class="el-tag el-tag--success el-tag--small el-tag--light">运行</span>
                        <span v-else class="el-tag el-tag--warning el-tag--small el-tag--light">暂停</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.createdTime | dateTimeFormat('yyyy-MM-dd HH:mm:ss')}}
                    </template>
                </el-table-column>

                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <button @click="toModify(scope.row)" type="button" class="el-button el-button--text el-button--mini" style="margin-right: 3px;">
                            <span>编辑</span>
                        </button>
                        <button @click="exec(scope.row.id)" type="button" class="el-button el-button--text el-button--mini" style="margin-left: -2px;">
                            <span>执行</span>
                        </button>

                        <button @click="updateStatus(scope.row.id)" type="button" class="el-button el-button--text el-button--mini" style="margin-left: 3px;">
                            <span v-if="scope.row.status === switchJson.ENABLE.value">暂停</span>
                            <span v-else>恢复</span>
                        </button>

                        <button @click="del(scope.row.id)" type="button" class="el-button el-button--text el-button--mini" style="margin-left: 3px;">
                            <span>删除</span>
                        </button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <my-el-pagination :total="pg.total" @pagination_change="pagination_change" :page_index="pg.pageNum"></my-el-pagination>

        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                :close-on-click-modal="false"
                width="50%">

            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" :inline="true" class="demo-form-inline">
                <el-form-item label="任务名称" prop="name">
                    <el-input v-model="editForm.name" style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="Bean名称" prop="beanName">
                    <el-input v-model="editForm.beanName" style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="执行方法" prop="methodName">
                    <el-input v-model="editForm.methodName" style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="Cron表达式" prop="cronExpression">
                    <el-input v-model="editForm.cronExpression" style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="任务描述" prop="remark">
                    <el-input v-model="editForm.remark"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-radio v-for="item in statuses" v-model="editForm.status" :label="item.value">{{item.label}}</el-radio>
                </el-form-item>

                <el-form-item label="参数内容" prop="params">
                    <el-input type="textarea"
                              :cols="50"
                              :rows="3" v-model="editForm.params"></el-input>
                </el-form-item>

            </el-form>


            <span slot="footer" class="dialog-footer">
                &nbsp;
                <el-button type="primary" @click="submitForm">确 定</el-button>
                &nbsp;
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog
                title="执行日志"
                :visible.sync="dialogVisibleLog"
                :close-on-click-modal="false"
                width="80%">

            <table>
                <tr>
                    <td>
                        <el-input v-model="searchFormLog.name" size="mini" placeholder="任务名称模糊搜索" clearable style="width: 200px;"></el-input>
                    </td>
                    <td>
                        <el-select v-model="searchFormLog.status" size="mini" placeholder="状态">
                            <el-option
                                    v-for="item in logStatuses"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                    <td>
                        <button @click="searchLog" type="button" class="el-button filter-item el-button--success el-button--small">
                            <i class="el-icon-search"></i><span>搜索</span>
                        </button>
                    </td>
                </tr>
            </table>

            <el-table
                    :data="logs"
                    style="width: 100%;margin-bottom: 20px;"
                    v-loading="loadingLog">
                </el-table-column>
                <el-table-column
                        prop="jobName"
                        label="任务名称">
                </el-table-column>

                <el-table-column
                        prop="beanName"
                        label="bean名称">
                </el-table-column>

                <el-table-column
                        prop="methodName"
                        label="执行方法">
                </el-table-column>

                <el-table-column
                        prop="params"
                        label="参数">
                </el-table-column>

                <el-table-column
                        prop="cronExpression"
                        label="cron表达式">
                </el-table-column>

                <el-table-column
                        prop="time"
                        label="耗时(毫秒)">
                </el-table-column>

                <el-table-column label="异常详情">
                    <template slot-scope="scope">
                        <span v-if="scope.row.error != null && scope.row.error !='' ">
                            <button @click="showException(scope.row.error)" class="el-button el-button--text el-button--mini" style=""><span>查看详情</span></button>
                        </span>
                    </template>
                </el-table-column>

                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <template v-if="scope.row.status">
                            <span class="el-tag el-tag--success el-tag--small el-tag--light">成功</span>
                        </template>
                        <template v-else>
                            <span class="el-tag el-tag--warning el-tag--small el-tag--light">失败</span>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.createdTime | dateTimeFormat('yyyy-MM-dd HH:mm:ss')}}
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pgLog.pageNum"
                    :page-size="6"
                    layout="total, prev, pager, next"
                    :total="pgLog.total">
            </el-pagination>
        </el-dialog>


        <el-dialog
                title="异常详情"
                :visible.sync="dialogVisibleLogException"
                :close-on-click-modal="false"
                width="80%">

            <div>
                {{exceptionInfo}}
            </div>
        </el-dialog>

    </div>
</body>
<script>
    let switchEnum = MY_ENUM.getElOptions("Switch").sort(COMPARE_DESC("value"));
    let switchJson = MY_ENUM.getEnum("Switch");
    let vm = new Vue({
        el: '#app',
        data: {
            pg:{

            },
            tableData: [],
            searchForm: {
                pageNum: 1,
                pageSize: DEFAULT_PAGE_SIZE,
                name: "",
                status: null
            },
            dialogVisible: false,
            dialogTitle: "",
            editForm: {},
            rules: {
                name: [{required: true, trigger: 'blur', message: '名称不能为空'}],
                beanName: [{required: true, trigger: 'blur', message: 'bean名称不能为空'}],
                methodName: [{required: true, trigger: 'blur', message: '方法名不能为空'}],
                cronExpression: [{required: true, trigger: 'blur', message: 'cron表达式不能为空'}],
            },
            loading: false,
            statuses: switchEnum,
            switchJson: switchJson,

            logStatuses: [{value: 1, label: "成功"},{value: 0, label: "失败"}],
            pgLog:{

            },
            logs: [],
            searchFormLog: {
                pageNum: 1,
                pageSize: 6,
                jobName: "",
                status: null
            },
            dialogVisibleLog: false,
            loadingLog: false,
            dialogVisibleLogException: false,
            exceptionInfo: ""
        },
        methods: {
            pagination_change (item) {
                this.searchForm.pageNum = item.pageNum;
                this.searchForm.pageSize = item.pageSize;
                this.loadTableData();
            },
            submitForm() {
                let that = this;
                this.$refs["editForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    myConfirm("确定提交？", function () {
                        showLoading("保存中....");
                        let url = BASE_PATH + "/scheduleJob/update";
                        if (that.editForm.id === undefined || that.editForm.id === "") {
                            url = BASE_PATH + "/scheduleJob/add";
                        }
                        Vue.delete(that.editForm, "createdTime");

                        myAjax({
                            type: "post",
                            url: url,
                            data: that.editForm,
                            isJson: true,
                            callback: function () {
                                hideLoading();
                                successMessage("提交成功！");
                                that.dialogVisible = false;
                                that.loadTableData();
                            }
                        })
                    });
                });

            },
            updateStatus(id) {
                let that = this;
                showLoading();
                myAjax({
                    type: "post",
                    url: BASE_PATH + "/scheduleJob/updateStatus",
                    data: {
                        id: id
                    },
                    callback: function () {
                        hideLoading();
                        successMessage("提交成功！");
                        that.loadTableData();
                    }
                })
            },
            exec(id) {
                showLoading();
                myAjax({
                    type: "post",
                    url: BASE_PATH + "/scheduleJob/exec",
                    data: {
                        id: id
                    },
                    callback: function () {
                        hideLoading();
                        successMessage("执行成功！");
                    }
                })
            },
            search() {
                this.searchForm.pageNum = 1;
                this.loadTableData();
            },
            loadTableData() {
                let that = this;
                this.loading = true;
                myAjax({
                    type: "get",
                    url: BASE_PATH + "/scheduleJob/list",
                    data: {
                        pageNum: that.searchForm.pageNum,
                        pageSize: that.searchForm.pageSize,
                        name: this.searchForm.name,
                        departmentId: this.searchForm.departmentId,
                        status: this.searchForm.status
                    },
                    callback: function (data) {
                        that.pg = data;
                        that.tableData = toTree(data.list);
                        that.loading = false;
                    }
                });
            },
            toModify(obj) {
                this.dialogTitle = "编辑任务";
                this.editForm = JSON.parse(JSON.stringify(obj));
                this.dialogVisible = true;
            },
            toAdd(obj) {
                this.dialogTitle = "新增任务";
                this.editForm = {
                    id: "",
                    name: "",
                    status: this.statuses[0].value
                };
                this.dialogVisible = true;
            },
            del(id) {
                let that = this;
                myConfirm("确定删除？", function () {
                    showLoading("保存中....");
                    let settings = {
                        type: "post",
                        url: BASE_PATH + "/scheduleJob/delete",
                        data: {id: id},
                        callback: function () {
                            hideLoading();
                            successMessage("删除成功！");
                            that.loadTableData();
                        }
                    };
                    myAjax(settings);
                });

            },
            searchLog() {
                this.searchFormLog.pageNum = 1;
                this.loadLogs();
            },
            showLog() {
                this.dialogVisibleLog = true;
                this.loadLogs();
            },
            handleCurrentChange (val) {
                this.searchFormLog.pageNum = val;
                this.loadLogs();
            },
            loadLogs() {
                let that = this;
                that.loadingLog = true;
                myAjax({
                    type: "get",
                    url: BASE_PATH + "/scheduleJobLog/list",
                    data: {
                        pageNum: that.searchFormLog.pageNum,
                        pageSize: that.searchFormLog.pageSize,
                        jobName: that.searchFormLog.jobName,
                        status: that.searchFormLog.status
                    },
                    callback: function (data) {
                        that.pgLog = data;
                        that.logs = data.list;
                        that.loadingLog = false;
                    }
                });
            },
            showException (exceptionInfo) {
               this.exceptionInfo = exceptionInfo;
                this.dialogVisibleLogException = true;
            }
        },
        created: function () {
            this.loadTableData();
            this.showButtonAdd = parent.checkPermissionByName("任务计划添加");
            this.showButtonUpdate = parent.checkPermissionByName("任务计划修改");
            this.showButtonDelete = parent.checkPermissionByName("任务计划删除");
            this.showButtonExec = parent.checkPermissionByName("任务计划执行");
            this.showButtonUpdatStatus = parent.checkPermissionByName("任务计划修改状态");
            this.showButtonLog = parent.checkPermissionByName("任务执行日志");
        }
    });
</script>
<style>
    .el-table {
        font-size: 12px;
    }
    .icons li{
        list-style: none;
        display:inline-block;
    }
</style>
</html>
